<template>
	<e-popup :show="show" round="10px" bgColor="transparent">
		<view class="coupon-container"  v-if="couponList.length">
			<view class="bg-white coupon-header e-flex e-flex-xy-center fw-600 c-333 e-font-32">
				{{$t('classify.优惠明细')}}
			</view>
			<view class="coupon-body">
				<!-- 	<view class="e-flex e-flex-xy-center bg-white e-m-b-20 item-box e-p-18">
				   		<text class="e-font-24 c-333 e-m-r-10 e-m-t-10">{{$t('classify.当前购买')}}</text>
						<text class="e-font-28 fw-600 e-m-t-10" :style="{color: AppSkin.primary}">{{$unitEn}}</text>
						<text class="e-font-48 fw-600 lh-40" :style="{color: AppSkin.primary}">209</text>
				   	</view> -->
				<view class="e-p-l-20 e-p-r-20 e-p-t-32 e-p-b-30 e-flex e-m-b-20 e-rela receive-box"
					v-for="item in couponList" :key="item.id"
					:style="{backgroundImage: item.ownCount ? `url(${$staticPath('coupon-item-bg-receive.png')})` : `url(${$staticPath('coupon-item-bg.png')})`}">
					<view class="e-flex-1 e-p-10">
						<view v-if="item.type === 1" class="e-flex fw-600 e-m-b-4 e-flex-xy-center"
							:style="{color: AppSkin.primary}" style="align-items: flex-end;">
							<text class="e-font-32 e-p-b-8">{{$unitEn}}</text>
							<text class="e-font-56">{{item.amount}}</text>
						</view>
						<view v-else class="e-flex fw-600 e-m-b-4 e-flex-xy-center"
							:style="{color: AppSkin.primary}" style="align-items: flex-end;">
							<text class="e-font-56">{{item.discountScale}}</text>
							<text class="e-font-32 e-p-b-8">{{$t('public.折')}}</text>
						</view>
						<view v-if="item.minPoint" class="e-font-20 text-center keep-all"
							:style="{color: AppSkin.primary}">
							{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('nearby.可用')}}
						</view>
						<view v-else class="e-font-20 text-center" :style="{color: AppSkin.primary}">
							{{$t('public.无门槛')}}
						</view>
						<view class="e-font-20 text-center" :style="{color: AppSkin.primary}" v-if="item.perLimit">
							({{$t('classify.限领')}}{{item.perLimit}}{{$t('classify.张')}})
						</view>
					</view>
					<view class="e-flex-2 e-p-10">
						<view class="c-333 fw-600 e-font-26 e-m-b-10">
							{{item.name}}
						</view>
						<view class="e-m-b-12 e-font-8 e-p-t-6 e-p-r-8 e-p-b-4 e-p-l-8 use-box"
							:style="{color: AppSkin.primary, borderColor: `${AppSkin.primary}`}">
							<text v-if="item.useType">{{$t('classify.部分商品可用')}}</text>
							<text v-else>{{$t('classify.全部商品可用')}}</text>
						</view>
						<view class="e-font-22 e-m-b-10" v-if="item.type === 2 && item.discountMoney">
							{{$t('public.最高优惠')}}：{{$unitEn}}{{item.discountMoney}}
						</view>
						<view class="c-98 e-font-20">
							<view v-if="item.useTimeType === 1">
								{{formatTime(item.useStartTime)}}-{{formatTime(item.useEndTime)}}
							</view>
							<view v-if="item.useTimeType === 2">
								{{$t('public.立即生效')}} {{$t('public.有效期')}} {{item.enableDays}} {{$t('public.day')}}
							</view>
						</view>
					</view>
					<view class="e-flex-1">
						<view class="use-btn c-white e-font-24	e-flex e-flex-xy-center" @tap="handleReceive(item)"
							:style="{background: AppSkin.gradientPrimary}">
							{{$t('classify.立即领取')}}
						</view>
					</view>
					<view v-if="item.platformType === 1" class="e-abso e-font-20 coupon-type"
						:style="{background:activeBackgroundColor,color: AppSkin.primary}">
						{{$t('classify.平台优惠券')}}
					</view>
					<view v-else class="e-abso e-font-20 coupon-type"
						:style="{background:activeBackgroundColor,color: AppSkin.primary}">
						{{$t('classify.店铺优惠券')}}
					</view>
				</view>
				<view v-if="activityInfo && activityInfo.discount || activityInfo.give"
					class="bg-white e-p-l-20 e-p-r-20 e-p-t-30 e-p-b-30 e-radius-20">
					<view class="e-m-b-26 e-flex" v-if="activityInfo.discount">
						<view class="activity-badge e-font-20"
							:style="{background:activitygroundColor, color: AppSkin.primary}">
							{{$t('classify.折扣')}}
						</view>
						<view class="e-m-l-20 c-333 e-font-24">
							{{activityInfo.discount}}
						</view>
					</view>
					<view class="e-flex" v-if="activityInfo.give">
						<view class="activity-badge e-font-20"
							:style="{background:activitygroundColor, color: AppSkin.primary}">
							{{$t('classify.赠送')}}
						</view>
						<view class="e-m-l-20 c-333 e-font-24 e-m-r-20" v-for="give in activityInfo.give">
							{{give.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="coupon-footer bg-white">
				<view @tap="handleClose" class="coupon-close-btn e-flex e-flex-xy-center c-white e-font-28 fw-600"
					:style="{'background': AppSkin.primary}">
					{{$t('classify.关闭')}}
				</view>
			</view>
		</view>
	</e-popup>
</template>

<script lang="ts" setup>
	import {ref,watch,computed} from 'vue'
	import {
		receiveCoupon
	} from '@/common/request/api'
	import type { CouponsItem } from '@/common/request/api'
	import type { GoodsInfo } from '../type'
	import { useCurrentInstance} from '@/common/hooks';
	const props = defineProps<{
		modelValue:boolean
		couponList:CouponsItem[]
		goodsInfo:GoodsInfo
		primary:string
	}>()
	const emit = defineEmits(['update:modelValue'])
	
	const ctx = useCurrentInstance()
	
	const show = computed({
		get(){
			return props.modelValue
		},
		set(v){
			emit('update:modelValue', v)
		}
	})
	
	
	const activityInfo = computed(() => {
		if (props.goodsInfo.activity) {
			let _activityInfo = JSON.parse(JSON.stringify(props.goodsInfo.activity))
			if (_activityInfo.give) _activityInfo.give = JSON.parse(_activityInfo.give)
			return _activityInfo
		}
		return {}
	})
	
	const activeBackgroundColor = computed(() => {
		return props.primary.replace('1)', '0.08)')
	})
	const activitygroundColor = computed(() => {
		return props.primary.replace('1)', '0.1)')
	})
	
	const formatTime = (val:string) => {
		return val.split(' ')[0]||''
	}
	
	
	const handleClose = () => {
			show.value = false
		}
	const handleReceive = (item:CouponsItem) => {
			if (!item.perLimit || item.ownCount >= item.perLimit) {
				ctx.$toastApp(ctx.$t('classify.noReceive'))
			
			} else {
				uni.showLoading()
				receiveCoupon(item.couponCode).then(res => {
					if (res.code == 200) {
						item.ownCount = item.ownCount + 1
						ctx.$toastApp(ctx.$t('classify.receiveSucess'))
					}
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	
</script>

<style lang="scss" scoped>
	.coupon-container {
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		background: #F7F7F7;
	}

	.coupon-header {
		height: 100rpx;
	}

	.coupon-footer {
		height: 198rpx;
		padding-top: 40rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.coupon-close-btn {
			height: 90rpx;
			border-radius: 46rpx;
		}
	}

	.coupon-body {
		max-height: 800rpx;
		overflow-y: auto;
		padding: 30rpx 20rpx;
	}

	.item-box {
		border-radius: 20rpx;
	}

	.lh-40 {
		line-height: 80rpx;
	}

	.use-btn {
		bottom: 22rpx;
		right: 40rpx;
		border-radius: 25rpx;
		width: 144rpx;
		height: 50rpx;
	}

	.use-box {
		border-radius: 4rpx;
		display: inline-block;
		border: 2rpx solid;
	}

	.c-98 {
		color: #989898;
	}

	.coupon-type {
		top: 0;
		left: 0;
		border-radius: 18rpx 0 18rpx 0;
		padding: 2rpx 20rpx;
	}

	.receive-box {
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.activity-badge {
		padding: 6rpx 10rpx;
		border-radius: 20rpx;
	}

	.border-radius-20 {
		border-radius: 20rpx;
	}
</style>